<template>
    <div class="bg-light lter b-b wrapper-md clearfix titleBtns">
        <h2 class="m-n font-thin h4 pull-left" @click="getSelectNodes()">UI Kits > jstree</h2>
    </div>

    <div class="wrapper-md">
        <div class="panel panel-default form-horizontal form" role="form">
            <div class="panel-heading" @click="getSelects()">
                <i class="fa fa-plus"></i>jstree
            </div>
            <div class="panel-body">
                <div class="row wrapper">
                    <jstree v-ref:mytree :tree-value.sync="entry.myTree" :tree-src="tree.url" :tree-plugins="tree.plugins" :tree-multiple="tree.multiple" :tree-stripes="tree.stripes"></jstree>
                </div>
            </div>
        </div>
    </div>

    <div class="wrapper-md no-padding-top">
        <div class="panel panel-default form-horizontal form" role="form">
            <div class="panel-heading">
                <i class="fa fa-plus"></i>fileUpload
            </div>
            <div class="panel-body">
                <div class="row wrapper">
                    <div class="form-group">
                        <label class="col-sm-1 control-label">文件上传:</label>
                        <div class="col-sm-10">
                            <div class="bootstrap-filestyle input-group">
                                <input type="text" class="form-control " disabled v-model="filesName">
                                <span class="group-span-filestyle input-group-btn" tabindex="0">
                                    <input type="file" id="upFileBtn"/>
                                    <label class="btn btn-default"><span class="glyphicon glyphicon-folder-open" style="margin-right: 4px;"></span>选择文件</label>
                                </span>
                            </div>
                        </div>
                    </div>

                    <div class="form-group row">
                        <label class="col-md-1 control-label">文件上传:</label>
                        <div class="col-md-10">
                            <div class="filestyle clearfloat">
                                <input type="text" class="form-control fileTxt fl" disabled v-model="fileName">
                                <vue-file-upload class="span-filestyle fl" url='upload.do'  v-bind:icon="icon" v-bind:files.sync='files' v-bind:filters='filters' v-bind:events='cbEvents' v-bind:request-options='reqopts'></vue-file-upload>
                            </div>
                        </div>
                    </div>

                    <div class="form-group row wrapper-md">
                        <button class="btn btn-dark btn-sm" @click="uploadFile()">开始上传</button>
                    </div>

                </div>
            </div>
        </div>
    </div>

</template>
<style>
    .fileupload-button input[type=file]{
        width: 100%;
        height: 100%;
    }

    .fileTxt{
        width:90%;
    }

    .span-filestyle{
        width: 10%;
        background-color: #fff !important;
        border:1px solid #cfdadd !important;
        color: #58666e !important;
        font-weight: bold !important;
        margin-left: -1px !important;
    }

</style>
<script>

    import jstree from '../../resources/components/vue-jstree.vue'

    import VueFileUpload from 'vue-file-upload'

    export default {        //这里是官方的写法，默认导出，ES6
        data () {           //ES6，等同于data:function(){}
            return {        //必须使用这样的形式，才能创建出单一的作用域
                entry:{
                    myTree:null
                },
                tree:{
                    url:'../datas/treedata.json',
                    plugins: ["checkbox","contextmenu","sort","dnd"],
                    multiple:false,
                    stripes:false
                },
                files:[],
                icon:'glyphicon glyphicon-folder-open',
                //文件过滤器，只能上传图片,
                fileName:'',
                fileObj:{},
                filters:[
                    {
                        name:"imageFilter",
                        fn(file){
                            var type = '|' + file.type.slice(file.type.lastIndexOf('/') + 1) + '|';
                            return '|jpg|png|jpeg|bmp|gif|'.indexOf(type) !== -1;
                        }
                    }
                ],
                //回调函数绑定
                cbEvents:{
                    onCompleteUpload (file,response,status,header){
                        console.log(file);
                        console.log(status);
                    }
                },
                //xhr请求附带参数
                reqopts:{
                    formData:{
                        tokens:'tttttttttttttt'
                    },
                    responseType:'json',
                    withCredentials:false
                }
            }
        },
        created () {

        },
        ready () {

        },
        watch: {
            'files' (newVal,oldVal) {
                this.fileObj = newVal[newVal.length-1];
                this.fileName = newVal[newVal.length-1].name;
            }
        },
        methods :{
            getSelects (){
                console.log(this.$refs.mytree.getSelectObj());
            },
            onStatus(file){
                if(file.isSuccess){
                    return "上传成功";
                }else if(file.isError){
                    return "上传失败";
                }else if(file.isUploading){
                    return "正在上传";
                }else{
                    return "待上传";
                }
            },
            uploadFile(){
                if(this.fileName == ''){
                    return;
                }else {
                    //单个文件上传
                    this.fileObj.upload();
                }

            }
        },
        components: {
            jstree,
            VueFileUpload
        },
        directives:{

        }
    }
</script>
